<template>
	<el-row class="panel">
		<el-col :span="24" class="panel-top">
			<h2>专车后台管理系统</h2>
			<div class='panel-top-right'>
				<el-dropdown>
					<span class="el-dropdown-link">个人信息<i class="el-icon-caret-bottom el-icon--right"></i></span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>登录</el-dropdown-item>
						<el-dropdown-item>退出</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</el-col>
		<el-col :span="24" class="panel-center">
			<aside class="panel-left">
				<el-menu :default-active="menuIdx" class="el-menu-vertical-demo" theme="dark" unique-opened router @select="handleSelect">
					<el-submenu index="1">
						<template class="hover1" slot="title"><i class="el-icon-message"></i>城市管理</template>
						<el-menu-item index="/city/home">城市参数</el-menu-item>
						<el-menu-item index="/city/region">区域管理</el-menu-item>
						<el-menu-item index="/city/position">定点管理</el-menu-item>
					</el-submenu>
					<el-submenu index="2">
						<template slot="title"><i class="el-icon-menu"></i>线路管理</template>
						<el-menu-item index="/line/lineParam">线路参数</el-menu-item>
					</el-submenu>
					<el-submenu index="3">
						<template slot="title"><i class="el-icon-menu"></i>代理公司管理</template>
						<el-menu-item index="/company/rentalCompany">代理公司</el-menu-item>
					</el-submenu>
					<el-submenu index="4">
						<template slot="title"><i class="el-icon-menu"></i>系统管理</template>
						<el-menu-item index="/sys/userList">用户管理</el-menu-item>
						<el-menu-item index="/sys/authority">权限管理</el-menu-item>
					</el-submenu>
					<el-submenu index="5">
						<template slot="title"><i class="el-icon-menu"></i>订单管理</template>
						<el-menu-item index="/order/passengersOrder">乘客订单</el-menu-item>
						<!--<el-menu-item index="/order/driverOrder">司机订单</el-menu-item>-->
						<el-menu-item index="/order/tripOrder">行程管理</el-menu-item>
					</el-submenu>
				</el-menu>
			</aside>

			<section class="panel-right">
				<div class="grid-content bg-purple-light">
					<router-view></router-view>
				</div>
			</section>
		</el-col>
	</el-row>
</template>

<script>
	export default {
		name: 'home',
		data() {
			return {

			}
		},
		methods: {
			handleSelect(key) {
				sessionStorage.setItem('menuIdx', key);
			}
		},
		created() {
			this.menuIdx = sessionStorage.getItem('menuIdx') ? sessionStorage.getItem('menuIdx') : "/city/home";
			this.$route.fullPath === "/" ? this.$router.replace("/city/home") : this.$router.replace(this.$route.fullPath);
		}
	}
</script>

<style scoped="scoped">
	.panel {
		background-color: #f3f3f4;
	}
	
	.panel-top {
		height: 50px;
	}
	
	.panel-top h2 {
		width: 220px;
		background-color: #38537f;
		color: #fff;
		height: 100%;
		line-height: 50px;
		margin: 0;
		display: inline-block;
		padding-left: 20px;
	}
	
	.panel-top-right {
		position: absolute;
		left: 240px;
		right: 0;
		top: 0;
		text-align: right;
		background-color: #fff;
		border-bottom: 1px solid #e7eaec;
		z-index: 1;
	}
	
	.el-dropdown {
		margin-right: 0px;
		display: block;
	}
	
	.el-dropdown-link {
		font-size: 14px;
		color: #5b81bc;
		float: right;
		line-height: 50px;
		margin-right: 20px;
	}
	
	.el-submenu .el-menu-item {
		background-color: #2f4b79;
		color: #e3e3e3;
	}
	.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item.is-active, .el-menu-item.is-active{
		color: #081e42 !important;
		background-color: #5a759f !important;
	}
	.el-menu--dark .el-submenu .el-menu .el-menu-item:hover {
		background-color: #5a759f !important;
		color: #081e42 !important;
	}
	.el-menu--dark {
		background-color: #38537f;
	}
	
	.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item.is-active,
	.el-menu-item.is-active {
		color: #5b81bc;
	}
	
	.el-dropdown-menu {
		margin: 40px 20px 0;
	}
	
	.panel-center {
		position: relative;
		width: 100%;
		height: calc(100% - 53px);
	}
	
	.panel-left {
		width: 240px;
		height: 100%;
	}
	
	.panel-left>.el-menu {
		height: 100%;
		border-radius: 0;
	}
	
	.panel-right {
		position: absolute;
		left: 240px;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 20px;
	}
	
	.panel-right> div {
		background-color: #fff;
		padding: 0 15px 15px 15px;
	}
	
	.panel {
		height: 100%;
	}
</style>